import { defineStore, acceptHMRUpdate } from "pinia";

import { T_GraphsMapConfig } from "@/types/graphs-konva";

import { T_GraphsConfigItem2 } from "@/types/graphs-konva.ts";
interface T_ViewportStore {
  countOfViewports?: number;
}

export interface _T_SingleViewport {
  readonly viewportIndex: number;
  contentSource: null | {
    contentSourceId: string;
    contentSourceDetails: {
      _id: string;
      name?: string;
      ipAddress: string;
      addr?: string;
      rtspUri?: string;
      currentRtspUri: string;
      rtspFullUri_List: any[];
      currentPipelineId: string;
      currentStreamId: string;
      streamList: Array<{ label: string; value: string }>;
      pipelineIds: Array<{ label: string; value: string }>;
      /** 检测结果 */
      konvaConfigMap: Map<string, Array<T_GraphsConfigItem2> | [] | undefined>;
      /** 识别区roi map */
      konvaConfigRois: Map<string, Array<T_GraphsConfigItem2> | [] | undefined>;
      /** 识别区roi list */
      // konvaConfigRoisList?: Array<T_GraphsConfigItem2>;
    }; //Record<string, any>;
  };
}
interface _T_ThisGridStore_FullState {
  statesOfAllViewports: _T_SingleViewport[];
  graphsMapConfig: T_GraphsMapConfig;
}

export function viewportsGrid_CreateSingle(options: {
  storeName: string;
  viewportsNum: number;
}) {
  const { storeName, viewportsNum } = options;

  function createStateObject(): _T_ThisGridStore_FullState {
    return {
      statesOfAllViewports: createViewPort(viewportsNum),
      graphsMapConfig: new Map(),
    };
  }

  function createViewPort(countOfViewports: number) {
    const list = new Array(countOfViewports).fill(0).map((_, index) => {
      return {
        viewportIndex: index + 1,
        contentSource: {
          contentSourceId: "",
          contentSourceDetails: {
            _id: "",
            name: "--",
            ipAddress: "",
            rtspUri: "",
            currentRtspUri: "",
            rtspFullUri_List: [],
            currentPipelineId: "",
            currentStreamId: "",
            streamIdList: [],
            pipelineIds: [],
            konvaConfigMap: new Map(),
            konvaConfigRoi: new Map(),
          },
        },
      };
    });
    return list;
  }

  const useThisStore = defineStore(storeName, {
    state(): _T_ThisGridStore_FullState {
      return createStateObject();
    },
    actions: {
      initViewPort(count: number) {
        const list = createViewPort(count);
        this.statesOfAllViewports = list;
      },
      assignContentSourceToViewport(options: _T_SingleViewport) {
        const { viewportIndex, contentSource } = options;
        this.statesOfAllViewports.forEach((item) => {
          if (item.viewportIndex === viewportIndex) {
            item.contentSource = contentSource;
          }
        });
      },
      clearOnPreviewingCamera(): void {
        this.statesOfAllViewports.forEach((item) => {
          const contentSourceDetails = item.contentSource?.contentSourceDetails;
          if (contentSourceDetails) {
            contentSourceDetails.name = "--";
            contentSourceDetails.currentRtspUri = "";
            contentSourceDetails.currentPipelineId = "";
            contentSourceDetails.currentStreamId = "";
            contentSourceDetails.streamIdList = [];
            contentSourceDetails.pipelineIds = [];
            contentSourceDetails.rtspFullUri_List = [];
          }
        });
      },
    },
  });
  return useThisStore;
}

// export const useStore_SystemOverview_ViewportsGrid = useThisStore
